<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AppxManager</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</meta>

	<!-- 用于模板引擎加载 -->
	<link rel="stylesheet" href="{{ url_for('static', filename='layui/css/layui.css') }}">
	<script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
	<!--	<script src="{{ url_for('static', filename='layui/jquery-3.7.1.min.js') }}"></script>-->
	<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

	<!-- 用于静态页面调试 -->
	<link rel="stylesheet" href="../static/layui/css/layui.css"/>
	<script src="../static/layui/layui.js"></script>
	<link rel="stylesheet" href="../static/css/main.css"/>
</head>
<body>
	<div class="layui-container">
		<div class="layui-bg-blue title">推荐卸载的应用（{{recom|length}}）</div>
		<div class="layui-form ">
			<div class="layui-row layui-col-space10">

				{% for rec in recom %}
				<!-- 每个 appx 占用 3 份（总共 12 份），即大约 25% 的宽度 -->
				<div class="layui-col-md3" data-card="{{rec.name}}">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-row">
								<div class="layui-col-md12">
									<h3>{{ rec.cn_name }}</h3>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md4">
									<span>是否框架: {{ '是' if rec.is_framework else '否' }}</span>
								</div>
								<div class="layui-col-md8">
									<span>版本: {{ rec.version }}</span>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-col-md4">
									<span>可卸载: {{ '是' if rec.canbe_uninstall else '否' }}</span>
								</div>
								<div class="layui-col-md8">
									<!-- 详情按钮 -->
									<button class="layui-btn layui-bg-blue layui-btn-sm"
									        lay-on="page-wrap-{{rec.id}}">
										<i class="layui-icon layui-icon-about"></i>
									</button>
									<div id="pw{{rec.id}}" style="display: none;">
										<div class="pw-box">
											<div class="layui-row">
												<div class="layui-col-md2">中文名：</div>
												<div class="layui-col-md10">{{rec.cn_name}}</div>
											</div>
											<div class="layui-row">
												<div class="layui-col-md2">名称</div>
												<div class="layui-col-md10">{{rec.name}}</div>
											</div>
											<div class="layui-row">
												<div class="layui-col-md2">版本</div>
												<div class="layui-col-md10">{{rec.version}}</div>
											</div>
											<div class="layui-row">
												<div class="layui-col-md2">包名称</div>
												<div class="layui-col-md10">{{rec.pkg_name}}</div>
											</div>
											<div class="layui-row">
												<div class="layui-col-md2">是否框架</div>
												<div class="layui-col-md10">{{ '是' if rec.is_framework else '否' }}
												</div>
											</div>
											<div class="layui-row">
												<div class="layui-col-md2">可卸载</div>
												<div class="layui-col-md10">{{ '是' if rec.canbe_uninstall else '否'
													}}
												</div>
											</div>
											<div class="layui-row">
												<div class="layui-col-md2">安装位置</div>
												<div class="layui-col-md10">{{rec.install_location}}</div>
											</div>
										</div>
									</div>
									<script>
                                        layui.use(function () {
                                            var $ = layui.$;
                                            var layer = layui.layer;
                                            var util = layui.util;
                                            util.on('lay-on', {
                                                'page-wrap-{{rec.id}}': function () {
                                                    console.log("111")
                                                    layer.open({
                                                        type: 1,
                                                        shade: false, // 不显示遮罩
                                                        content: $('#pw{{rec.id}}'), // 捕获的元素
                                                        end: function () {
                                                            // layer.msg('关闭后的回调', {icon:6});
                                                        }
                                                    });
                                                },
                                            })
                                        });
									</script>

									<!-- 卸载按钮 -->
									<button type="button" name="uninstall" class="layui-btn layui-btn-sm layui-bg-blue"
									        data-appname="{{rec.name}}">
										<i class="layui-icon layui-icon-delete"></i>
									</button>

									<input type="checkbox" name="rec-check" title="选择" lay-filter="app-check"
									       data-appname="{{rec.name}}">


								</div>
							</div>
						</div>
					</div>
				</div>
				{% endfor %}
				<!-- 多选操作面板 -->
				<div class="layui-col-md3">
					<div class="layui-card ">
						<div class="layui-card-body opration">
							<div class="layui-btn-container">
								<button class="layui-btn layui-btn-sm layui-bg-green" lay-on="sel-all">全选</button>
								<button class="layui-btn layui-btn-sm layui-bg-blue" lay-on="sel-reverse">反选</button>
								<button class="layui-btn layui-btn-sm layui-bg-purple" lay-on="sel-none">全不选</button>
<!--								<button class="layui-btn layui-btn-sm layui-bg-cyan" lay-on="test-page-wrap">捕获层测试-->
								</button>
								<div id="ID-test-layer-wrapper" style="display: none;">
									<div style="padding:16px;">
										中文名称：捕获层测试<br>
										名称：<br>
										版本：<br>
										包名称：<br>
										安装位置：<br>
										是否框架：<br>
										可卸载：<br>
									</div>
								</div>
								<script>
                                    layui.use(function () {
                                        var $ = layui.$;
                                        var layer = layui.layer;
                                        var util = layui.util;
                                        // 事件
                                        util.on('lay-on', {
                                            'test-page-wrap': function () {
                                                layer.open({
                                                    type: 1,
                                                    shade: false, // 不显示遮罩
                                                    content: $('#ID-test-layer-wrapper'), // 捕获的元素
                                                    end: function () {
                                                        // layer.msg('关闭后的回调', {icon:6});
                                                    }
                                                });
                                            },
                                        });
                                    });
								</script>
							</div>
							<div class="layui-btn-container">
								<button class="layui-btn layui-btn-sm layui-bg-red" lay-on="onekey">
									<i class="layui-icon layui-icon-delete"></i>一键卸载
								</button>
								<button class="layui-btn layui-btn-sm layui-bg-orange" lay-on="export-names">导出名称
								</button>
								<!--								<button class="layui-btn layui-btn-sm layui-bg-orange">导出全部</button>-->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="layui-bg-blue title">其他可卸载（{{ other_uninstallable|length }}）</div>
		<div class="layui-row layui-col-space10">
			{% for appx in other_uninstallable %}
			<!-- 每个 appx 占用 3 份（总共 12 份），即大约 25% 的宽度 -->
			<div class="layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="layui-row">
							<div class="layui-col-md12">
								<h3>{{ appx.cn_name }}</h3>
							</div>
						</div>
						<div class="layui-row">
							<div class="layui-col-md4">
								<span>是否框架: {{ '是' if appx.is_framework else '否' }}</span>
							</div>
							<div class="layui-col-md8">
								<span>版本: {{ appx.version }}</span>
							</div>
						</div>
						<div class="layui-row">
							<div class="layui-col-md4">
								<span>可卸载: {{ '是' if appx.canbe_uninstall else '否' }}</span>
							</div>
							<div class="layui-col-md8">
								<button type="button" class="layui-btn layui-bg-blue layui-btn-sm">详情</button>
								<button type="button" class="layui-btn layui-bg-blue layui-btn-sm">卸载</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			{% endfor %}
		</div>


		<div class="layui-bg-blue title">框架类（{{ frameworks|length }}）</div>
		<div class="layui-row layui-col-space10">
			{% for appx in frameworks %}
			<!-- 每个 appx 占用 3 份（总共 12 份），即大约 25% 的宽度 -->
			<div class="layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="layui-row">
							<div class="layui-col-md12">
								<h3>{{ appx.cn_name }}</h3>
							</div>
						</div>
						<div class="layui-row">
							<div class="layui-col-md4">
								<span>是否框架: {{ '是' if appx.is_framework else '否' }}</span>
							</div>
							<div class="layui-col-md8">
								<span>版本: {{ appx.version }}</span>
							</div>
						</div>
						<div class="layui-row">
							<div class="layui-col-md4">
								<span>可卸载: {{ '是' if appx.canbe_uninstall else '否' }}</span>
							</div>
							<div class="layui-col-md8">
								<button type="button" class="layui-btn layui-bg-blue layui-btn-sm">详情</button>
								<button type="button" class="layui-btn layui-bg-blue layui-btn-sm">卸载</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			{% endfor %}
		</div>


	</div> <!--layui-container结束-->

	<script>
        // 监听 checkbox 事件
        layui.use(function () {
            var $ = layui.$;
            var form = layui.form;
            var util = layui.util;

            // 卸载按钮
            $('button[name="uninstall"]').click(function () {
                var name = $(this).data('appname');
                console.log(name);
                var index = layer.load(2, {shade: [0.6,'#000']});
                $.post('/uninstall', {name: name}, function (data) {
                    console.log(data);
                    if (data.code === 0) {
                        layer.close(index);
                        layer.msg('操作完成');
                        //layui-anim-fadeout渐隐动画
	                    // $('[data-card="' + name + '"]').addClass('layui-anim layui-anim-fadeout');
	                    // $('[data-card="' + name + '"]').addClass('animated fadeOutUpBig');
	                    $('[data-card="' + name + '"]').addClass('animated rotateOutUpLeft');

                        //等待动画
	                    setTimeout(function () {
                            //移除data-card==name的元素
                            $('[data-card="' + name + '"]').remove();
                        }, 500);
                        //移除data-card==name的元素
	                    // $('[data-card="' + name + '"]').remove();
                    } else {
                        layer.close(index);
                        layer.msg('操作失败<br/>data.message');
                    }
                })
            });

            form.on('checkbox(app-check)', function (data) {
                // console.log(data.elem.checked);
                console.log(data.elem.dataset.appname);
            })

            util.on({
                'sel-all': function () {
                    console.log('全选');
                    // 全选所有name="rec-check"的复选框
                    var checkboxes = $('input[type="checkbox"][name="rec-check"]');
                    checkboxes.each(function () {
                        $(this).prop('checked', true);
                        form.render('checkbox');
                    })
                },
                'sel-none': function () {
                    console.log('全不选');
                    // 全选所有name="rec-check"的复选框
                    var checkboxes = $('input[type="checkbox"][name="rec-check"]');
                    checkboxes.each(function () {
                        $(this).prop('checked', false);
                        form.render('checkbox');
                    })
                },
                'sel-reverse': function () {
                    console.log('反选');
                    var checkboxes = $('input[type="checkbox"][name="rec-check"]');
                    checkboxes.each(function () {
                        $(this).prop('checked', !$(this).prop('checked'));
                        form.render('checkbox');
                    })
                },
                // 一键卸载
                'onekey': function () {
                    console.log('一键卸载');
                    var checkboxes = $('input[type="checkbox"][name="rec-check"]');
                    var names = [];
                    checkboxes.each(function () {
                        if ($(this).prop('checked')) {
                            names.push($(this).data('appname'));
                        }
                    })
                    // console.log(names);
                    if (names.length === 0) {
                        layer.msg('请选择至少一项进行卸载');
                        return;
                    }
                    //将名称数组发送到后端onekey_uninstall路由
	                var index = layer.load(2, {shade: [0.6,'#000']});
                    $.post('/onekey_uninstall', {names: names}, function (data) {
                        console.log(data);
                        if (data.code === 0) {
                            layer.close(index);
                            layer.msg('操作完成');
                            // 逐个添加样式
	                        for (var i = 0; i < names.length; i++) {
                                card='[data-card="'+names[i]+'"]';
                                $(card).addClass('animated rotateOutUpLeft');
                            }
                            //等待动画
	                        setTimeout(function () {
                                //移除data-card值在names中的元素
	                            for (var i = 0; i < names.length; i++) {
                                    card='[data-card="'+names[i]+'"]';
                                    console.log(card);
                                    $(card).remove();
                                }
                            }, 500);
                            //移除data-card值在names中的元素
	                        // for (var i = 0; i < names.length; i++) {
                            //     card='[data-card="'+names[i]+'"]';
                            //     console.log(card);
                            //     $(card).remove();
                            // }
                        } else {
                            layer.close(index);
                            layer.msg('操作失败');
                        }
                    })


                },
                'export-names': function () {
                    console.log('导出名称');
                    var checkboxes = $('input[type="checkbox"][name="rec-check"]');
                    var names = [];
                    checkboxes.each(function () {
                        if ($(this).prop('checked')) {
                            names.push($(this).data('appname'));
                        }
                    })
                    console.log(names);
                    // 弹出提示
                    layer.msg('已导出 ' + names.length + ' 个名称');
                    // 弹框显示选中的名称
                    layer.open({
                        title: '选中的名称 ' + names.length,
                        content: '<div style="padding: 20px;">' + names.join('<br/>') + '</div>',
                        area: ['500px', '600px'],
                        type: 1,
                        shade: 0.8,
                        btn: ['确定'],
                        yes: function (index, layero) {
                            layer.close(index);
                        }
                    });
                },
            })
        })

        // $(function () {
        //     $('button[name="uninstall"]').click(function () {
        //         console.log($(this).data('appname'));
        //     });
        // });

	</script>


</body>
</html>